<template>
  <div class="home-container">

    <van-nav-bar class="page-nav-bar">
    <van-button class="search-btn" slot="title" type="info" icon="search" size="small" round to="/search">搜索</van-button></van-button>
    </van-nav-bar>

    <van-tabs class="channel-tabs" v-model="active">
  <van-tab :title="channel.name" v-for="channel in channels" :key="channel.id">
  <articlelist :channel="channel"/>
  </van-tab>

  <!--划到最后被挡住了，在最后多添加一个空位-->
  <div slot="nav-right" class="wap-nav-placeholder" >
  </div>

  <div slot="nav-right" @click="isChannelEditShow = true" class="wap-nav-wrap">
  <van-icon name="wap-nav" />
  </div>
</van-tabs>

<van-popup v-model="isChannelEditShow" position="bottom" class="channel-edit-popup" closeable  close-icon-position="top-left" get-container="body">
<channelEdit :userChannels="channels" @close="isChannelEditShow = false" @updateActive = "onUpdateActive" :active="active"/>
</van-popup>
  </div>
</template>

<script>
import articlelist from './article-list.vue'
import {getUserChannels} from '../api/user.js'
import channelEdit from '../components/channel-edit.vue'
import {mapState} from 'vuex'
import {getItem} from '../utils/storage'
export default {
  name: "home",
  data(){
      return {
          active:0,
          channels:[],
        //   编辑频道的显示状态
          isChannelEditShow:true
      }
  },
  computed:{
      ...mapState(['user'])
  },
  
  created(){
      this.loadChannels()
  },
  components:{
      articlelist,
      channelEdit
  },
  methods:{
      async loadChannels(){
        //   要判断用户的登录状态，未登录也能拿到本地存储的数据
        let channels = []
        if(this.user){
            // 已登录 获取线上的用户频道列表数据
          const {data:res} = await getUserChannels()
          channels = res.data.channels
        }else{
            // 没有登录,判断是否有本地存储的频道列表数据
            const localChannels = getItem('user-channels')
            if(localChannels){
                // 有本地存储的频道列表就存到channels上
                channels = localChannels
            }else{
                // 用户既没有登录也没有本地存储，获取推荐的频道列表
                const {data:res} = await getUserChannels()
                channels = res.data.channels
            }
        }
// 处理好的数据放到模板中来使用
        this.channels = channels
        //   const {data:res} = await getUserChannels()
        //   console.log(res.data)
        //   this.channels = res.data.channels
      },
    //   切换频道 子传父  $event 表示事件参数
      onUpdateActive(index){
          this.active = index
      }
  }
};
</script>
<style scoped lang="less">
.home-container{
    /deep/.van-nav-bar__title{
        max-width:none;
    }
    .search-btn{
        width:250px;
        height:32px;
        background:#5babfb;
        border:none;
        .van-button__text{
            font-size:14px;
        }
        .van-icon{
            font-size:16px;
        }
    }
    .channel-tabs{
        /deep/.van-tab{
            border-right:1px solid #edeff3;
            border-bottom:1px solid #edeff3;
        }
    /deep/.van-tabs__line{
        width:15px !important;
        height:3px;
        background:#3296fa;
        bottom:20px;
    }
    }
    .wap-nav-wrap{
        position:fixed;
        right:0;
        height:43px;
        line-height:43px;
        background-color:#fff;
        display:flex;
        justify-content:center;
        align-items:center;
        opacity:0.9;
        width:33px;
        .van-icon{
            font-size:25px;
        }
    }
    .wap-nav-placeholder{
        width:33px;
        flex-shrink:0;
    }
}
.channel-edit-popup{
        height:100%;
    }
</style>
